import React, { Component } from 'react';

class View extends Component {
    constructor(props){
        super(props);
        this.state = {
            name:'',
            gender:'',
            age:'',
            invite:{
                name:'',
                tel:'',
                code:''
            },
            resume:{
                base:{
                    name:'',
                    tel:'',
                    code:''
                },
                experience:[],
                exp:{
                    time:'',
                    job:''
                },
                contact:{
                    name:'',
                    tel:'',
                    code:'',
                    fw:'coconut',
                    gender:'male'
                },
                intention:{

                }
            }
        }
    }
    //单个Input
    handleChange(e){
        this.setState({
            name:e.target.value
        })
    }
    // 多个input
    _handleChange(e){
        e.preventDefault();
        let name = e.target.name;
        let value = e.target.value;
        this.setState({
            [name]:value
        })
    }
    __handleChange(e){
        e.preventDefault();
        let name = e.target.name;
        let value = e.target.value;
        const invite = this.state.invite;
        invite[name] = value;
        this.setState({invite});
    }
    ___handleChange(e){
        let name = e.target.name;
        let value = e.target.value;
        // 获取自定义属性
        let namekey = e.target.getAttribute('namekey');
        // h5 e.target.dataset.test 兼容ie11 及手机端  html data-test="test"
        // console.log(e.target.dataset.test)
        const resume = this.state.resume;
        resume[namekey][name] = value;
        this.setState({resume});
    }
    alert(e){
        e.preventDefault();
        console.log(1);
    }
    render(){
        // console.log(this.state.invite)
        console.log(this.state.resume)
        return(
            <div className="input">
                <dl>
                    <dt>开始学input了</dt>
                    <dd><a href="true" onClick={(e)=>this.alert(e)}>点击按钮</a></dd>
                </dl>
                <ul>
                    <li>
                        <label>姓名：{this.state.name}</label>
                        <div className="label_ctrl">
                            <input type="text" onChange={(e)=>this.handleChange(e)} placeholder="请输入姓名" value={this.state.name}/>
                        </div>
                    </li>
                    <li>
                        <label>性别：{this.state.gender}</label>
                        <div className="label_ctrl">
                            <input type="text" name="gender" onChange={(e) => this._handleChange(e)} placeholder="请输入性别" value={this.state.gender}/>
                        </div>
                    </li>
                    <li>
                        <label>年龄{this.state.age}</label>
                        <div className="label_ctrl">
                            <input type="text" name="age" onChange={(e) => this._handleChange(e)} placeholder="请输入年龄" value={this.state.age}/>
                        </div>
                    </li>
                </ul>
                <dl>
                    <dt>邀请人</dt>
                    <dd>
                        <label>年龄{this.state.invite.name}</label>
                        <div className="label_ctrl">
                            <input type="text" name="name" onChange={(e) => this.__handleChange(e)} placeholder="请输入年龄" value={this.state.invite.name}/>
                        </div>
                    </dd>
                    <dd>
                        <label>电话{this.state.invite.tel}</label>
                        <div className="label_ctrl">
                            <input type="text" name="tel" onChange={(e) => this.__handleChange(e)} placeholder="请输入年龄" value={this.state.invite.tel}/>
                        </div>
                    </dd>
                    <dd>
                        <label>邀请码{this.state.invite.code}</label>
                        <div className="label_ctrl">
                            <input type="text" name="code" onChange={(e) => this.__handleChange(e)} placeholder="请输入年龄" value={this.state.invite.code}/>
                        </div>
                    </dd>
                </dl>
                <dl>
                    <dt>简历</dt>
                    <dd>
                        <label>年龄{this.state.resume.base.name}</label>
                        <div className="label_ctrl">
                            <input type="text" data-test="test" name="name" namekey="base" onChange={(e) => this.___handleChange(e)} placeholder="请输入年龄" value={this.state.resume.base.name}/>
                        </div>
                    </dd>
                    <dd>
                        <label>电话{this.state.resume.base.tel}</label>
                        <div className="label_ctrl">
                            <input type="text" name="tel" namekey="base" onChange={(e) => this.___handleChange(e)} placeholder="请输入年龄" value={this.state.resume.base.tel}/>
                        </div>
                    </dd>
                    <dd>
                        <label>邀请码{this.state.resume.base.code}</label>
                        <div className="label_ctrl">
                            <input type="text" name="code" namekey="base" onChange={(e) => this.___handleChange(e)} placeholder="请输入年龄" value={this.state.resume.base.code}/>
                        </div>
                    </dd>
                    <dd>
                        <label>年龄{this.state.resume.contact.name}</label>
                        <div className="label_ctrl">
                            <input type="text" name="name" namekey="contact" onChange={(e) => this.___handleChange(e)} placeholder="请输入年龄" value={this.state.resume.contact.name}/>
                        </div>
                    </dd>
                    <dd>
                        <label>电话{this.state.resume.contact.tel}</label>
                        <div className="label_ctrl">
                            <input type="text" name="tel" namekey="contact" onChange={(e) => this.___handleChange(e)} placeholder="请输入年龄" value={this.state.resume.contact.tel}/>
                        </div>
                    </dd>
                    <dd>
                        <label>邀请码{this.state.resume.contact.code}</label>
                        <div className="label_ctrl">
                            <textarea name="code" namekey="contact" onChange={(e) => this.___handleChange(e)} placeholder="请输入年龄" value={this.state.resume.contact.code}></textarea>
                        </div>
                    </dd>
                    <dd>
                        <label>邀请码{this.state.resume.contact.fw}</label>
                        <div className="label_ctrl">
                        <select name="fw" namekey="contact" onChange={(e) => this.___handleChange(e)} defaultValue={this.state.resume.contact.fw}>
                            <option value="grapefruit">葡萄柚</option>
                            <option value="lime">酸橙</option>
                            <option value="coconut">椰子</option>
                            <option value="mango">芒果</option>
                            </select>
                        </div>
                    </dd>
                    <dd>
                        <label>性别{this.state.resume.contact.gender}</label>
                        <div className="label_ctrl">
                              男<input type="radio" namekey="contact" name="gender" value="male" defaultChecked={this.state.resume.contact.gender === 'male' ? 'checked' : ''} onClick={(e) => this.___handleChange(e)} />
                              女<input type="radio" namekey="contact" name="gender" value="female" defaultChecked={this.state.resume.contact.gender === 'female' ? 'checked' : ''} onClick={(e) => this.___handleChange(e)}/>
                        </div>
                    </dd>
                </dl>
            </div>
        )
    }
}
export default View;
